<template>
  <div class="about-root">
    <div class="left-box">
      <div class="code">
        <div class="rowup">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p>...................o888888o.o88888888o.</p>
          <p>.................8888888888888888888888888o.</p>
          <p>...............888::::888888888888888888888888o.</p>
          <p>.............88::::::::88888888888888888888888888o.</p>
          <p>...........o8:::::::::888::顶88888888888888888888888.</p>
          <p>..........8888:8::::::8:::::::::顶88888888888888888888.</p>
          <p>.........8888::::8888::::::::::::::::顶88888888888 '88</p>
          <p>........8888:::888888888::::::::::::::::顶888888888 8</p>
          <p>.......88.88888888888888888:::::::::::::顶88888888888</p>
          <p>......88..888888888888888888:::::::::::顶88888888888888</p>
          <p>......88.888888888888888888888::::::::顶88888888888888888</p>
          <p>......8..8888888888888888888888::::::顶88888888888888888888</p>
          <p>........8888888888888888::88888:::::顶8888888888888888888888</p>
          <p>......88888888888888888::::8888::::顶8888888888888888 '8888</p>
          <p>.....88888888888888888::::8888::::顶:8::***::888888888 888</p>
          <p>....88888888888888888::::888:::::顶::::*EYE*::888888888 88</p>
          <p>..888888888888888888::::88::::::顶:::::::::::::888888888 88</p>
          <p>.8888888888888888888::::8::::::顶:::::::::::::顶888888888 88</p>
          <p>888...8888888888::88::::8:::::顶:::8oo8::::::88888888888888 8</p>
          <p>88...88888888888:::8:::::::::顶:::::::::::::88888888888888888</p>
          <p>.8..8888888888888:::::::::::顶::"8888888":::顶88888888888888888</p>
          <p>..8888888888::888::::::::::顶:::::"8a8"::::顶88888888888888888888</p>
          <p>.888888888:::::88:::::::::顶88::::::::::::顶88888888888888888888888</p>
          <p>8888888888:::::8:::::::::顶88888::::::::顶888888888888888888888888888</p>
          <p>888888888:::::8:::::::::顶8888888ooooo顶8888888888888888888888888888888</p>
          <p>888888.顶::::::::::::::顶8888888888::::::顶8888888888888888 '888888888</p>
          <p>8888..顶:::::::::::::::顶88888888888::::::顶8888888888888888 88888888</p>
          <p>.888..顶::::::::::::::顶8888888888888:::::::顶888888888888888 888888</p>
          <p>..888.顶:::::::::::::顶88888888888888888::::::顶8888888888888 88888</p>
          <p>...88.顶:::::::::::::8888:88888888888888888:::::顶顶888888888 8888</p>
          <p>...88.顶:::::::::::8888顶::88888::888888888888:::::顶顶88888 888</p>
          <p>...8...顶::::::::::8888顶:::8888:::::88888888888::::::顶顶88 888</p>
          <p>.......8顶:::::::8888顶:::::888:::::::88:::8888888:::::::顶顶 88</p>
          <p>......88顶:::::::8888顶::::::88:::::::::8:::::888888::::::::顶顶 88</p>
          <p>.....8888顶:::::888顶:::::::::88::::::::::顶::::8888::::::::::::顶 8</p>
          <p>....88888:顶::::888顶::::::::::8:::::::::::顶::::888::::::::::::::顶</p>
          <p>...88.888:顶:::888:顶::::::::::8::::::::::::顶::888::::::::::::::::顶</p>
          <p>...8.88888顶:::88::顶::::::::::::::::::::::::顶:88::::::::::::::::::顶</p>
          <p>.....88888顶:::88::顶:::::::::::::::::::::::::顶88:::::::::::::::::::顶</p>
          <p>.....88888顶:::88::顶:::::::::::::::::::::::::顶:8::::::::::::::::::::顶</p>
          <p>....888888顶::::8::顶::::::::::::::8888::::::::顶8::::::::::::8888:::::顶</p>
          <p>....88888..顶:::8::顶顶:::::::::::888888:::::::顶::::::::::::888888::::顶</p>
          <p>....8888...顶顶:::::顶顶::::::::::888888:::::::顶顶::::::::::888888::::顶</p>
          <p>....8888....顶:::::::顶顶::::::::::8888:::::::顶顶顶::::::::::8888::::顶'</p>
          <p>.....888....顶顶::::::顶顶顶:::::::::::::::::顶顶::顶::::::::::::::::顶'</p>
          <p>......88.....顶::::::::顶顶顶顶:::::::::::顶顶顶:::顶顶:::::::::::::顶'</p>
          <p>.......88....顶顶:::::::::顶顶顶顶顶顶顶顶顶顶:::::::顶顶顶顶顶顶顶顶'</p>
          <p>........88....顶顶::::::::::::顶顶顶顶顶顶顶::::::::::::顶顶顶顶顶o'</p>
          <p>.........88...8顶顶::::::::::::::::::::::::::::::::::::::::顶</p>
          <p>..........8...88顶顶::::::::::::::::::::::顶:::顶::::::::::顶</p>
          <p>..............888顶顶::::::::::::::::::顶顶::::::顶顶::::::顶</p>
          <p>.............88888顶顶:::::::::::::::顶顶顶:::::::顶顶:::::顶</p>
          <p>.............888888顶顶:::::::::::::顶顶顶:::::::::顶顶:::顶</p>
          <p>............88888888顶顶:::::::::::顶顶顶:::::::::::顶:::顶</p>
          <p>...........88.8888888.顶::::::::顶顶顶::::::::::::::顶::顶</p>
          <p>...........8..888888..顶::::::顶顶:::::::::::::::::顶::顶</p>
          <p>..............888888..顶:::::顶:::::::::::::::::::顶::顶顶</p>
          <p>.............888888...顶::::顶::::::::::::::::::::::::顶顶</p>
          <p>.............888888...顶::::顶::::::::::::::::::::::::顶:顶</p>
          <p>.............88888...顶::::::::::::::8::::::::::::::::顶::顶</p>
          <p>............88888...顶:::::::::::::::88::::::::::::::::顶::顶</p>
          <p>...........88888...顶::::::::::::::::8::::::::::::::::::顶::顶</p>
          <p>..........88888...顶:::::顶:::::::::::::::::::::顶::::::::顶::顶</p>
          <p>..........8888...顶:::::顶:::::::::::::::::::::::顶顶::::::顶::顶</p>
          <p>.........8888...顶:::::顶:::::::::::::::::::::::顶顶顶:::::::顶:顶</p>
          <p>........888....顶:::::顶顶::::::::::::::::::::::顶顶顶::::::::顶:顶</p>
          <p>......8888....顶::::::顶顶:::::::::::::::::::::顶顶顶::::::::: 顶:顶</p>
          <p>.....888......顶:::::顶:::::::::::::::::::::::顶顶::::::::::::::顶:顶</p>
          <p>..8888.......顶::::::::::::::::::::::::::::::顶::::::::::::::::::顶:顶</p>
          <p>.............顶::::::::::::::::::::::::::::::::::::::::::::::::::顶:顶</p>
          <p>............顶::::::::顶:::::::::::::::::::::::::::::::::::::::::顶:顶</p>
          <p>............顶::::::::顶:::::::::::::::::顶::::::::::::::::::::::顶:顶</p>
          <p>...........顶::::::::::顶::::::::::::::顶::::::::::::::::::::::::顶:顶</p>
          <p>...........顶:::::::::::顶8::::::::8:顶:::::::::::::::::::::::::顶:顶p</p>
          <p>...........顶::::::::::::888hole888顶:::::::::::::::::::::::::::顶:顶o</p>
          <p>...........顶:::::::::::::88888888顶:::::::::::::::::::::::::::顶:顶p</p>
          <p>...........顶::::::::::::::888888顶::::::::::::::::::::::::::::顶:顶</p>
          <p>...........顶:::::::::::::::88888顶:::::::::::::::::::::::::::顶:顶</p>
          <p>...........顶:::::::::::::::::88顶::::::::::::::::::::::::::::顶顶</p>
          <p>...........顶:::::::::::::::::::顶:::::::::::::::::::::::::::顶顶</p>
          <p>...........顶:::::::::::::::::::顶::::::::::::::::::::::::::顶顶</p>
          <p>............顶:::::::::::::::::顶::::::::::::::::::::::::::顶顶</p>
          <p>............顶:::::::::::::::::顶::::::::::::::::::::::::::顶</p>
          <p>.............顶:::::::::::::::顶::::::::::::::::::::::::::顶</p>
          <p>.............顶:::::::::::::::顶:::::::::::::::::::::::::顶</p>
          <p>..............顶:::::::::::::顶:::::::::::::::::::::::::顶</p>
          <p>..............顶:::::::::::::顶:::::::::::::::::::::::顶</p>
          <p>...............顶:::::::::::顶:::::::::::::::::::::::顶</p>
          <p>...............顶:::::::::::顶::::::::::::::::::::::顶</p>
          <p>................顶:::::::::顶::::::::::::::::::::::顶</p>
          <p>................顶:::::::::顶:::::::::::::::::::::顶</p>
          <p>.................顶:::::::顶:::::::::::::::::::::顶</p>
          <p>..................顶::::::顶::::::::::::::::::::顶</p>
          <p>..................顶:::::顶::::::::::::::::::::顶</p>
          <p>...................顶:::顶::::::::::::::::::::顶</p>
          <p>...................顶::顶::::::::::::::::::::顶</p>
          <p>....................顶:顶:::::::::::::::::::顶</p>
          <p>....................顶顶:::::::::::::::::::顶</p>
          <p>....................顶顶::::::::::::::::::顶</p>
          <p>....................顶顶:::::::::::::::::顶</p>
          <p>....................顶顶:::::顶::::::::顶顶</p>
          <p>....................顶顶::::顶顶:::::::顶顶</p>
          <p>....................顶顶::::::顶顶:::::顶顶</p>
          <p>.....................顶顶::::::::::::::顶顶</p>
          <p>.....................顶顶::::顶:::::::::顶顶</p>
          <p>......................顶顶::顶顶顶:::::::顶顶</p>
          <p>......................顶顶::顶顶顶:::::::顶顶</p>
          <p>......................顶顶:::顶顶::::::::::顶</p>
          <p>.......................顶顶::顶顶::::::::::顶</p>
          <p>.......................顶顶::顶顶:::::::::::顶</p>
          <p>.......................顶顶:::顶::::::::::::顶</p>
          <p>.......................顶顶:::::::::::::::::顶</p>
          <p>.......................顶顶:::::::::::::::::顶</p>
          <p>.......................顶顶::::::::::::::::::顶</p>
          <p>.......................顶顶::::::::::::::::::顶</p>
          <p>.......................顶顶::::::::::::::::::顶</p>
          <p>........................顶顶:::::::::::::::::顶</p>
          <p>........................顶顶:::::::::::::::::顶</p>
          <p>........................顶顶:::::::::::::::::顶</p>
          <p>........................顶顶:::::::::::::::::顶</p>
          <p>........................顶顶:::::::::::::::::顶</p>
          <p>.........................顶顶:::::::::::::::顶</p>
          <p>.........................顶顶:::::::::::::::顶</p>
          <p>.........................顶顶:::::::::::::::顶</p>
          <p>.........................顶顶::::::::::::::顶</p>
          <p>..........................顶顶:::::::::::::顶</p>
          <p>..........................顶顶:::::::::::::顶</p>
          <p>..........................顶顶:::::::::::::顶</p>
          <p>..........................顶顶::::::::::::顶</p>
          <p>..........................顶顶::::::::::::顶</p>
          <p>...........................顶顶:::::::::::顶</p>
          <p>...........................顶顶::::::::::顶</p>
          <p>...........................顶顶::::::::::顶</p>
          <p>............................顶顶::::::::顶</p>
          <p>............................顶顶::::::::顶</p>
          <p>............................顶顶::::::::顶</p>
          <p>.............................顶顶:::::::顶</p>
          <p>.............................顶顶:::::::顶</p>
          <p>..............................顶顶::::::顶</p>
          <p>..............................顶顶::::::顶</p>
          <p>..............................顶顶::::::顶</p>
          <p>..............................顶顶::::::顶</p>
          <p>..............................顶顶::::::顶</p>
          <p>..............................顶顶::::::顶</p>
          <p>.............................顶顶:::::::顶</p>
          <p>............................顶:顶::::::::顶</p>
          <p>............................顶:顶:::::::::顶</p>
          <p>............................顶:顶::::::::::顶</p>
          <p>............................顶:顶:::::::::::顶</p>
          <p>............................顶:顶::::::::::::顶</p>
          <p>............................顶:顶:::::::::::::顶</p>
          <p>............................顶:顶::::::::::::::顶</p>
          <p>............................顶顶:::::::::::::::::顶</p>
          <p>..............................顶顶::::::::::::::::顶</p>
          <p>................................顶顶顶:::::::::顶顶</p>
          <p>..................................顶顶::顶::::顶顶</p>
          <p>...................................顶顶顶顶顶顶顶</p>
          <p>......................................顶顶顶顶顶</p>

        </div>
      </div>
      <div class="introduce">
        <p>历经几个月，忙里偷闲，个人博客终于稍有雏形了，
          不过还有很多功能需要完善和改进，
          后续在慢慢找BUG，
          主要的难点还是页面的设计和布局这一块
          这一块占据了整个开发90%的时间
          本想着以后端为主，前端了解一下就好了的心态学习前端
          谁知道这里面的水深的一批</p>
      </div>
      <div class="introduce">
        <p>之所有要花那么久的时间做一个自己的博客网站
          主要还是为了检验自己一路以来的自学成果，
          虽说项目的业务很基础，但每一串代码都是自己敲出来的，
          项目上线的那一刻内心依旧自豪，也希望各位能够将自己的建议或浏览本站时出现的问题反馈于我，
          我将悉心听取各位的建议，不断完善。
        </p>
      </div>
    </div>
    <div class="right-box">
      <div class="feedback" >
        <H3>如果您遇到什么问题欢迎反馈，站长会虚心听取您的建议</H3>
        <p><span style="color: red">*</span>您的建议或问题:</p>
        <textarea class="content" placeholder="请输入详细内容" v-model="content"></textarea>
        <p>您的联系方式:</p>
        <el-input
          placeholder="请输入联系方式"
          v-model="contact"
          clearable>
        </el-input>
        <button type="button" class="send" @click="send">发送
        </button><i class="el-icon-loading" v-show="sendLoading"></i>
        <p class="email">或通过邮箱1678871454@qq.com联系站长</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "About",
      data() {
        return {
          content: '', //反馈内容
          contact: '', //联系方式
          sendLoading: false ,
          waitingFlag: true //防止在等待反馈时反复提交
        }
      },
      methods: {
        send(){
          if(this.content!=='' && this.waitingFlag){
            this.sendLoading = true;
            this.waitingFlag = false;
            let formData = new FormData();
            formData.append('contact', this.contact);
            formData.append('content', this.content);
            this.$axios({
              method: 'post',
              url: 'http://localhost:8088/insertFeedBack',
              data: formData
            }).then(() =>{
              this.content = '';
              this.contact = '';
              this.$message({
                showClose: true,
                message: '您的意见以征收，感谢您的反馈',
                center: true,
                type: 'success'
              });
              this.sendLoading = false;
              this.waitingFlag = true;
            })
            .catch(()=>{
              this.$message({
                message: '抱歉，服务器内部出现错误',
                type: 'error'
              });
              this.sendLoading = false;
              this.waitingFlag = true;
            })
          }
          else {
            this.$message({
              message: '反馈内容不能为空',
              type: 'error'
            });
          }
        }
      },
      watch: {
        'content': {
          handler() {
            if (this.content.length > 500) {
              this.$message({
                message: '内容最大限制500个字符哦',
                type: 'warning'
              });
              this.content = this.content.slice(0, 500);
            }
          },
        },
        'contact': {
          handler() {
            this.contact = this.contact.trim();
            if (this.contact.length > 25) {
              this.$message({
                message: '内容最大限制25个字符哦',
                type: 'warning'
              });
              this.contact = this.contact.slice(0, 25);
            }
          },
        }
      }
    }
</script>

<style scoped>
  .about-root{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  .left-box{
    width: auto;
    padding-top: 20px;
  }
  /*博客介绍*/
  .introduce{
    width: 490px;
    box-shadow: 0 0 15px #000000;
    margin-top: 30px;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #969696;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    background: -webkit-linear-gradient(#0a2700, black); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#0a2700, black); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#0a2700, black); /* Firefox 3.6 - 15 */
    background: linear-gradient(#0a2700, black); /* 标准的语法 */
  }
  .introduce p{
  }
  @keyframes rowup {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, -550px, 0);
      transform: translate3d(0, -1700px, 0);
    }
  }
  .code{
    width: 490px;
    color: #26b12a;
    background-image: linear-gradient(to bottom, #292828, #1b1a1a);
    background-image: -moz-linear-gradient(top, #292828, #1b1a1a);
    background-image: -o-linear-gradient(top, #292828, #1b1a1a);
    background-image: linear-gradient(to bottom, #292828, #1b1a1a);
    position: relative;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    font-family: fangsong;
    font-size: xx-small;
    box-shadow: 0 0 15px #000000;
  }
  .code .rowup{
    margin: 0 auto;
    -webkit-animation: 19s rowup linear infinite normal;
    animation: 19s rowup linear infinite normal;
    position: relative;
    width: 90%;
  }
  .rowup p{
    margin: 0;
    padding: 0;
  }
  .right-box{
    padding: 0 30px;
    overflow: auto;
  }
  .feedback{
    overflow: auto;
    width: 500px;
    margin: 0 auto;
  }
  .content{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    width: 99% !important;
    height: 150px;
    resize: none;
    padding: 5px 10px;
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px
    solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    line-height: 40px;
    outline: 0;
  }
  .content:focus{
    border: 1px solid #5f76ff;
  }
  .content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  .send{
    margin-top: 30px;
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    background-image: -moz-linear-gradient(top, #3bbf64, #2b8045);
    background-image: -o-linear-gradient(top, #3bbf64, #2b8045);
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    font-family: fantasy;
    width: 100px;
    height: 38px;
    right: 85px;
    bottom: 20px;
    border-radius: 5px;
    border: #8e8e8e 1px solid;
  }
  .send:active{
    background-image: linear-gradient(to bottom, #35ad5b, #2b8045);
    background-image: -moz-linear-gradient(top, #35ad5b, #2b8045);
    background-image: -o-linear-gradient(top, #35ad5b, #2b8045);
    background-image: linear-gradient(to bottom, #35ad5b, #2b8045);
  }
  .email{
    border-radius: 5px;
    font-weight: bold;
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    background-image: -moz-linear-gradient(top, #3bbf64, #2b8045);
    background-image: -o-linear-gradient(top, #3bbf64, #2b8045);
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    padding: 20px 20px;
  }
</style>
